<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="review-item u-flex-y" v-for="(item, index) in filteredMarkList" :key="index">
				<view style="margin-bottom: 16rpx;" class="u-flex">
					<u-image :src="item.cover" width="200rpx" height="120rpx" />
					<view class="title">{{ item.title }}</view>
				</view>
				<view class="flex-shrink-0 u-flex u-flex-items-center u-flex-between">
					<view class="sj u-flex">
						<view>{{ $u.timeFormat(item.updateTime, 'yyyy-mm-dd') }}</view>
						<view style="margin-left: 10rpx;">{{ channelStr(item.channelId) }}</view>
						<view class="u-flex-xy-center" style="margin-left: 10rpx;"><u-icon name="eye"
								:label="item.views" /></view>
					</view>
					<view class="btn-detail u-flex-xy-center u-flex-shrink" @click="toDetail(item.content,item)">查看详情
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		articleList,
		articleDetail
	} from "@/config/api.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin  
		data() {
			return {
				title: '大神经验',
				height: 0,
				markList: [], // 存储所有获取到的数据  
				filteredMarkList: [], // 存储筛选后的“大神经验”数据  
				downOption: {
					use: false
				},
				upOption: {
					textNoMore: '一不小心被你看完啦~',
					toTop: {
						right: '24rpx',
						bottom: '60rpx'
					}
				}
			};
		},
		onShow() {
			const res = uni.getSystemInfoSync();
			this.height = res.windowHeight - 100; // 100为组件高度  
			this.mescroll.resetUpScroll();
			this.fetchData(); // 初始化时加载数据  
		},
		methods: {
			channelStr(key) {
				switch (key) {
					case 0:
						return '大神经验';
					case 1:
						return '上岸攻略';
					case 2:
						return '申论参考';
					case 3:
						return '备考故事';
					case 4:
						return '时政热点';
					case 5:
						return '其他';
					default:
						break;
				}
			},
			async fetchData(page = {
				num: 1,
				size: 10
			}) {
				try {
					const res = await articleList(`?channelId=0&pageNum=${page.num}&pageSize=${page.size}`);
					if (res && res.rows) {
						// 筛选“大神经验”数据  
						const filteredData = res.rows.filter(item => item.channelId === 0);
						// 后台接口有返回列表的总数据量  
						this.mescroll.endBySize(filteredData.length, res.total); // 必传参数(当前页的数据个数, 总数据量)  
						// 如果是第一页需手动清空列表  
						if (page.num === 1) {
							this.markList = [];
							this.filteredMarkList = [];
						}
						this.markList = [...this.markList, ...res.rows]; // 追加原始数据到markList  
						this.filteredMarkList = [...this.filteredMarkList, ...
						filteredData]; // 追加筛选后的数据到filteredMarkList  
					}
				} catch (error) {
					// 联网失败, 结束加载  
					this.mescroll.endErr();
				}
			},
			upCallback(page) {
				this.fetchData(page); // 上拉加载时调用fetchData方法，传入当前页码和每页数量  
			},
			async toDetail(content, item) {
				try {
					const res = await articleDetail(item.id);
					const data = JSON.stringify(res.data);
					if (res.code === 200) {
						// 如果文章详情获取成功，则导航到详情页面  
						uni.navigateTo({
							url: `/pages/experience/components/detail?content=${encodeURIComponent(content)}`
						});
					} else {
						uni.$u.toast(res.msg);
					}

				} catch (error) {
					// 联网失败或 articleDetail 调用失败时执行  
					this.mescroll.endErr(); // 结束加载并显示错误  
					console.error('获取文章详情失败:', error); // 可选：打印错误信息到控制台  
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view-contain {
		position: relative;

		.review-item {
			width: calc(100vw - 48rpx);
			margin: 12rpx 24rpx 12rpx;
			padding: 24rpx;
			background-color: #FFF;
			border-radius: 32rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 16rpx;
				white-space: normal;
				word-break: break-all;
				overflow: hidden;
			}

			.sj {
				font-size: 28rpx;
				font-weight: normal;
				color: #333;
			}

			.btn-detail {
				border-radius: 12rpx;
				font-size: 28rpx;
				padding: 0 12rpx;
				color: #409EFF;
				border: 1rpx solid #409EFF;
			}
		}

		.flex-shrink-0 {
			flex-shrink: 0;
		}
	}
</style>